<template>

    <div>
    <div ref="newElDialog">
      <el-container style="min-width: 1200px;">
        <el-header class="addsales-header">开票信息</el-header>
        <el-main class="addsales-main">
          <el-form :inline="true" size="medium" :model="params" :rules="rules" ref="ruleForm" id="add" @submit.native.prevent="submit" class="search-form" label-width="145px" style="padding-bottom: 10px;">
            <div class="clearfix">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="发据开票日期：" required prop="billDate">
                  <el-date-picker type="date" v-model="params.billDate" name="billDate" placeholder="选择日期" style="width:192px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="发票代码：" required prop="billCode">
                  <el-input clearable placeholder="请输入内容" maxlength="32" v-model="params.billCode" name="billCode" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="发票号码：" required prop="billNo">
                  <el-input clearable placeholder="请输入内容" maxlength="32" name="billNo" v-model="params.billNo" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="发票金额(元)：" required prop="billPrice">
                  <el-input clearable placeholder="请输入内容" maxlength="16" name="billPrice" v-model="params.billPrice" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="厂牌：" required prop="billCarMark">
                  <el-input clearable placeholder="请输入内容" maxlength="32" name="billCarMark" v-model="params.billCarMark" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="号牌：" required prop="billCarPlateCode">
                  <el-select placeholder="京" style=" width: 62px;" name="billCarPlateHead" v-model="params.billCarPlateHead" >
                    <el-option v-for="item in $store.state.common.platesOptions" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                  <el-select placeholder="A" style=" width: 60px;" name="billCarPlateMiddle" v-model="params.billCarPlateMiddle" >
                    <el-option v-for="item in $store.state.common.platesEnOptions" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                  <el-input clearable placeholder="88888" maxlength="5" style=" width: 90px;" name="billCarPlateCode" v-model="params.billCarPlateCode" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="机动车发动机号：" required prop="billCarEngineNo">
                  <el-input clearable placeholder="请输入内容" maxlength="32" name="billCarEngineNo" v-model="params.billCarEngineNo" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="机动车车架号：" required prop="billCarVin">
                  <el-input clearable placeholder="请输入内容" maxlength="17" name="billCarVin" v-model="params.billCarVin" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="车辆名称：" required prop="billCarName">
                  <el-input clearable placeholder="请输入内容" maxlength="200" name="billCarName" v-model="params.billCarName" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="车辆类型：" required prop="carTypeId">
                  <el-select placeholder="请选择" style=" width: 120px;" v-model="params.carTypeId" >
                    <el-option v-for="(item, index) in $store.state.common.carBaseParamOptions.baseCarTypeOptions" :key="index" :label="item.carTypeName" :value="item.carTypeId">
                    </el-option>
                  </el-select>
                </el-form-item>

              </el-col>
            </div>
            <div class="clearfix">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="买方单位/个人：">
                  <el-input clearable placeholder="请输入内容" maxlength="200" name="billBuyerName" v-model="params.billBuyerName" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="单位代码/身份证号：">
                  <el-input clearable placeholder="请输入内容" maxlength="18" name="billBuyerNo" v-model="params.billBuyerNo" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="买方单位/个人住址：">
                  <el-input clearable placeholder="请输入内容" maxlength="200" name="billBuyerAddress" v-model="params.billBuyerAddress" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="电话：">
                  <el-input clearable placeholder="请输入内容"  maxlength="32" name="billBuyerMobile" v-model="params.billBuyerMobile" >
                  </el-input>
                </el-form-item>
              </el-col>

            </div>
            <div class="clearfix">

              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="卖方单位/个人：">
                  <el-input clearable placeholder="请输入内容"  maxlength="200" name="billSellerName" v-model="params.billSellerName" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="单位代码/身份证号：">
                  <el-input clearable placeholder="请输入内容"  maxlength="18" name="billSellerNo" v-model="params.billSellerNo" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="卖方单位/个人住址：">
                  <el-input clearable placeholder="请输入内容"  maxlength="200" name="billSellerAddress" v-model="params.billSellerAddress" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="电话：">
                  <el-input clearable placeholder="请输入内容" maxlength="32" name="billSellerMobile" v-model="params.billSellerMobile" >
                  </el-input>
                </el-form-item>
              </el-col>
            </div>
            <div class="clearfix">
              <el-form-item label="转入地车管所：" required prop="cityId">
                <el-select placeholder="请选择" style=" width: 120px;" v-model="params.provinceId" >
                  <el-option v-for="item in res.provinceOptions" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId">
                  </el-option>
                </el-select>
                <el-select placeholder="请选择" style=" width: 120px;" v-model="params.cityId" >
                  <el-option v-for="item in res.cityOptions" :key="item.cityId" :label="item.cityName" :value="item.cityId">
                  </el-option>
                </el-select>
                <el-input clearable placeholder="请输入内容" maxlength="32" style=" width: 260px;" name="billDMV" v-model="params.billDMV" >
                </el-input>
              </el-form-item>
            </div>
            <div class="clearfix">
              <el-form-item label="备注：">
                <el-input type="textarea" placeholder="请输入内容" maxlength="200" style="width: 400px;" name="billRemark" v-model="params.billRemark" ></el-input>
              </el-form-item>
              <div class="none">
                <input type="text" name="carTypeId" :value="params.carTypeId" />
                <input type="text" name="provinceId" :value="params.provinceId" />
                <input type="text" name="cityId" :value="params.cityId" />
                <input type="text" name="brandId" :value="params.brandId" />
                <input type="text" name="seriesId" :value="params.seriesId" />
                <input type="text" name="modelId" :value="params.modelId" />
                <input type="text" name="billCarColor" :value="params.billCarColor" />
                <input type="text" name="marketId" :value="params.marketId" />
                <input type="text" name="shopId" :value="params.shopId" />
                <input type="text" name="billId" :value="params.billId" v-if="params.billId" />
                <input type="text" name="userId" value="1" />
                <button type="submit" ref="formSubmit">Submit</button>
              </div>
            </div>
          </el-form>
        </el-main>
        <el-header class="addsales-header">开票补充信息</el-header>
        <el-main class="addsales-main">
          <el-form :inline="true" size="medium" :model="params" :rules="rules2" ref="ruleForm2" class="search-form" label-width="150px" style="padding-bottom: 10px;">
            <div>
              <el-form-item label="品牌车系：" required prop="modelId">
                <el-select v-model="params.brandId" placeholder="请选择品牌" >
                  <el-option-group v-for="group in res.brandOptions" :key="group.initial" :label="group.initial">
                    <el-option v-for="item in group.brandInfo" :key="item.brandId" :label="`${group.initial} - ${item.brandName}`" :value="item.brandId">
                    </el-option>
                  </el-option-group>
                </el-select>
                <el-select v-model="params.seriesId" placeholder="请选择车系" >
                  <el-option v-for="item in res.seriesOptions" :key="item.seriesId" :label="item.seriesName" :value="item.seriesId">
                  </el-option>
                </el-select>
                <el-select v-model="params.modelId" placeholder="请选择车型" >
                  <el-option v-for="item in res.modeOptions" :key="item.modelId" :label="item.modelName" :value="item.modelId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="车身颜色：" clearable prop="billCarColor">
                <el-select placeholder="请选择" name="billCarColor" v-model="params.billCarColor" >
                  <el-option v-for="item in $store.state.common.carBaseParamOptions.baseCarInColorOptions" :key="item.colorId" :label="item.colorName" :value="item.colorName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属市场：" required prop="marketId">
                <el-select placeholder="请选择" name="marketId" v-model="params.marketId" clearable >
                  <el-option v-for="item in res.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属商家：" required prop="shopId">
                <el-select placeholder="请选择" name="shopId" v-model="params.shopId" clearable >
                  <el-option v-for="item in res.shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </el-main>
      </el-container>
    </div>
    <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="formSubmitChange">确 定</el-button>
		</span>
    </div>
</template>

<script>
  // import { mapActions } from 'vuex'
  export default {
    data () {
      return {
        input1: '',
        select1: '',
        params: {
          carTypeId: 20,
          cityId: '',
          brandId: '',
          seriesId: '',
          modelId: '',
          marketId: '',
          shopId: ''
        },
        res: {
          marketOptions: [],
          shopOptions: [],
          brandOptions: [],
          seriesOptions: [],
          modeOptions: [],
          colorOptions: [],
          carTypeOptions: [],
          provinceOptions: [],
          cityOptions: [],
          params: {},
          provinceId: ''
        },
        newElDialog: true,
        rules: {
          billDate: [{
            required: true,
            message: '请选择发据开票日期',
            trigger: 'change'
          }],
          billCode: [
            {
              required: true,
              message: '请输入发票代码',
              trigger: 'change'
            },
            {
              pattern: /^\w+$/g,
              message: '发票代码格式错误'
            }
          ],
          billNo: [
            {
              required: true,
              message: '请输入发票号码',
              trigger: 'change'
            },
            {
              pattern: /^\w+$/g,
              message: '发票号码格式错误'
            }
          ],
          billPrice: [
            {
              required: true,
              message: '请输入发票金额',
              trigger: 'change'
            },
            {
              pattern: /^(\d+\.\d+||\d+)$/g,
              message: '发票金额格式错误'
            }
          ],
          billCarMark: [{
            required: true,
            message: '请输入厂型',
            trigger: 'change'
          }],
          billCarPlateCode: [
            {
              required: true,
              message: '请输入车牌号',
              trigger: 'change'
            },
            {
              pattern: '[0-9A-Za-z]{5}',
              message: '请输入正确车牌号'
            }
          ],
          billCarEngineNo: [
            {
              required: true,
              message: '请输入发动机号',
              trigger: 'change'
            },
            {
              pattern: '^[0-9A-Za-z]+$',
              message: '请输入正确发动机号'
            }
          ],
          billCarVin: [
            {
              required: true,
              message: '请输入车架号',
              trigger: 'change'
            },
            {
              pattern: '[0-9A-Za-z]{17}',
              message: '车架号需17位、不含有特殊字符',
              trigger: 'change'
            }
          ],
          billCarName: [{
            required: true,
            message: '请输入车辆名称',
            trigger: 'change'
          }],
          carTypeId: [{
            required: true,
            message: '请选择车辆类型',
            trigger: 'change'
          }],
          cityId: [{
            required: true,
            message: '请选择转入地车管所',
            trigger: 'change'
          }]
        },
        rules2: {
          modelId: [{
            required: true,
            message: '请选择品牌、车系、车型',
            trigger: 'change'
          }],
          billCarColor: [{
            required: true,
            message: '请选择车身颜色',
            trigger: 'change'
          }],
          marketId: [{
            required: true,
            message: '请选择市场',
            trigger: 'change'
          }],
          shopId: [{
            required: true,
            message: '请选择店铺',
            trigger: 'change'
          }]
        },
        submit1: false,
        submit2: false
      }
    },
    methods: {
      // ...mapActions([
      //   'baseCarOutColor'
      // ]),
      handleClose (val) {
        this.pros && (this.pros.show = false)
        this.$route.params.id && (this.$router.push({path: '/sales'}))
      },
      formSubmitChange () {
        this.$refs['ruleForm2'].validate((valid) => {
          if (valid) this.submit2 = true
        })
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) this.submit1 = true
        })
        if (this.submit1 && this.submit2) {
          this.$refs.formSubmit.click()
        }
        this.submit2 = false
        this.submit1 = false
      },
      warning (val) {
        this.$message({
          message: val,
          type: 'warning'
        })
        return false
      },
      success (val) {
        this.$message({
          message: val,
          type: 'success'
        })
      },
      submit (event) {
        let forms = new FormData(event.target)
        if (this.pros && this.pros.show) {
          this.$axios.post(this.$api.updateSaleBill, forms).then((res) => {
            this.success('修改成功')
            setTimeout(() => {
              this.$emit('handleClose')
            }, 1000)
          })
        } else {
          this.$axios.post(this.$api.insertSaleBill, forms).then((res) => {
            this.success('新增成功')
            // setTimeout(() => {
            //   this.handleClose(true)
            // }, 1000)
          })
        }
      },

      queryData () {
        this.res.params.brandId = this.params.brandId
        this.res.params.seriesId = this.params.seriesId
        this.res.params.modelId = this.params.modelId
        this.res.params.provinceId = this.params.provinceId
        this.res.params.marketId = this.params.marketId
        this.$store.commit('getMarketOptions', this.res)
        this.$store.commit('getShopOptions', this.res)
        this.$store.commit('getBrandsOptions', this.res)
        this.$store.commit('getSeriesOptions', this.res)
        this.$store.commit('getModeOptions', this.res)
        this.$store.commit('getProvinceOptions', this.res)
        this.$store.commit('getCityOptions', this.res)
        this.$store.commit('getBaseParamOptions')
      },
      // 多重回调
      watchPublicFn (start, end, commit, watch, startobj, endobj, callbacks, next) {
        if (!start) return false
        this.$store.commit(commit, this.res)
        this.$watch(watch, function (startto, endto) {
          this.$nextTick().then(() => {
            this.params[startobj] = this.res[endobj][0] && this.res[endobj][0][startobj]
            if (typeof callbacks === 'function') callbacks()
            if (next && next.length > 0) this.watchPublicFn(...next)
          })
        })
      }
    },
    props: [ 'pros' ],
    created () {
      // this.$bus.$emit('hideSort')
      this.pros && (this.params = this.pros.obj)
    },
    mounted () {
      this.queryData()
      // 初始化数据完成后监听
      this.$watch('params.provinceId', function (start, end) {
        this.res.provinceId = this.params.provinceId
        this.watchPublicFn(start, end, 'getCityOptions', 'res.cityOptions', 'cityId', 'cityOptions')
      }, {immediate: true})
      this.$watch('params.brandId', function (start, end) {
        this.res.params.brandId = this.params.brandId
        this.watchPublicFn(start, end, 'getSeriesOptions', 'res.seriesOptions', 'seriesId', 'seriesOptions', () => { this.res.params.seriesId = this.params.seriesId }, [start, end, 'getModeOptions', 'res.modeOptions', 'modelId', 'modeOptions'])
      }, {immediate: true})
      this.$watch('params.seriesId', function (start, end) {
        this.res.params.seriesId = this.params.seriesId
        this.watchPublicFn(start, end, 'getModeOptions', 'res.modeOptions', 'modelId', 'modeOptions')
      }, {immediate: true})
      this.$watch('params.marketId', function (start, end) {
        this.res.params.marketId = this.params.marketId
        this.watchPublicFn(start, end, 'getShopOptions', 'res.shopOptions', 'shopId', 'shopOptions')
      }, {immediate: true})
    },
    watch: {
      'params.billCarVin' (start) {
        this.params.billCarVin = start.toUpperCase()
      },
      'params.billCarPlateCode' (start) {
        this.params.billCarPlateCode = start.toUpperCase()
      },
      'params.billCarEngineNo' (start) {
        this.params.billCarEngineNo = start.toUpperCase()
      }
    }
  }
</script>
<style scoped="scoped">
  .addsale-container {
    width: 1200px;
  }

  .addsales-header {
    background: #B3C0D1;
    line-height: 60px;
  }

  .addsales-main {
    padding: 0;
  }

  .none {
    display: none;
  }
  .el-col.el-col-24.el-col-sm-24.el-col-md-12.el-col-lg-8.el-col-xl-6{ height: 62.40px;}
  .el-form-item.el-form-item--medium{ height: 36px;}
  .new-el-dialog {}
</style>
